<template>
	<view>
		<view class="visitorTop">

			<view class="visitorTopTitle">
				访问总览
			</view>
			<view class="visitorTopBoxWp">
				<view class="visitorBox" :class="colorList[0]">
					<view class="yesterdayNum">
						昨日 :{{countView.yesterday}}
					</view>
					<view class="todayNum">
						{{countView.today}}
					</view>
					<view class="title">
						访问人数
					</view>
				</view>
				<view class="visitorBox" :class="colorList[1]">
					<view class="yesterdayNum">
						昨日 :{{countView.yesterdayNew}}
					</view>
					<view class="todayNum">
						{{countView.todayNew}}
					</view>
					<view class="title">
						新用户
					</view>
				</view>
				<view class="visitorBox" :class="colorList[2]">
					<view class="yesterdayNum">
						昨日 :{{countView.yesterdayVisit}}
					</view>
					<view class="todayNum">
						{{countView.todayVisit}}
					</view>
					<view class="title">
						访问次数
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			countView: {
				type: Object,
				required: true
			}
		},
		data() {
			return {
				colorList: [
					'purple',
					'red',
					'orange'
				],
				rankingTitle: [
					'排名',
					'用户',
					'访问量',
				],
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.visitorTop {
		padding-bottom: 50upx;

		.visitorTopTitle {
			font-size: 24upx;
			font-weight: 400;
			color: #000000;
			padding: 30upx;

		}

		.visitorTopBoxWp {
			display: flex;
			justify-content: space-evenly;

			.red {

				background: linear-gradient(#F5D5E6, #F8F9FF) !important;
				box-shadow: 0px 1px 4px 0px #F5D5E6 !important;

				.yesterdayNum,
				.todayNum {
					color: #E74782 !important;
				}

			}

			.orange {
				background: linear-gradient(#F9EFD9, #F8F9FF) !important;
				box-shadow: 0px 1px 4px 0px #F9EFD9 !important;

				.yesterdayNum,
				.todayNum {
					color: #FFC742 !important;
				}
			}

			.visitorBox {
				box-sizing: border-box;
				padding: 30upx;
				width: 217upx;
				height: 250upx;
				background: linear-gradient(#E0D6FC, #F8F9FF);
				box-shadow: 0px 1px 4px 0px rgba(66, 60, 254, 0.5);
				border-radius: 20upx;

				.yesterdayNum {
					font-size: 24upx;
					font-weight: 300;
					color: #7E4BF2;
				}

				.todayNum {
					font-size: 60upx;
					font-weight: 500;
					color: #7E4BF2;
					text-align: center;
					padding: 20upx 0;
				}

				.title {
					text-align: center;
					font-size: 30upx;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}
</style>